<template>
    <div>
        <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="roleName"
                label="角色名称"
                width="180">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="edit(scope.row)">
                        编辑
                    </el-button>
                    <el-button type="danger">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            @current-change="handleCurrentChange"  
            :current-page="page.currentPage" 
            :page-size="page.pageSize"
            layout="prev, pager, next"
            :total="page.total"
            >
        </el-pagination>

        <el-dialog
            title="修改角色"
            :show-close="false"
            :visible.sync="dialogVisible"
            width="800"
            >
            <el-form ref="form" :model="nowRole" label-width="80px">
                <el-form-item label="角色名称">
                    <el-input v-model="nowRole.roleName"></el-input>
                </el-form-item>
                <!-- // 使用树形穿梭框组件 -->
                <tree-transfer 
                    :title="['未分配权限','已分配权限']" 
                    :from_data='fromData' 
                    :to_data='toData' 
                    :defaultProps="{label:'menuName'}"
                    @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
                </tree-transfer>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import treeTransfer from 'el-tree-transfer' // 引入
export default {
    components:{
        treeTransfer
    },
    data(){
        return{
            mode: "transfer", // transfer addressList
            loading:true,
            dialogVisible:false,
            tableData:[],
            page:{
                currentPage: 1,  
                pageSize:5,
                total:0
            },
            nowRole:{
                roleId:0,
                roleName:""

            },
            fromData:[
              {
                id: "1",
                pid: 0,
                label: "一级 1",
                children: [
                  {
                    id: "1-1",
                    pid: "1",
                    label: "二级 1-1",
                    disabled: true,
                    children: []
                  },
                  {
                    id: "1-2",
                    pid: "1",
                    label: "二级 1-2",
                    children: [
                      {
                        id: "1-2-1",
                        pid: "1-2",
                        children: [],
                        label: "二级 1-2-1"
                      },
                      {
                        id: "1-2-2",
                        pid: "1-2",
                        children: [],
                        label: "二级 1-2-2"
                      }
                    ]
                  }
                ]
              },
            ],
            toData:[]
        }
    },
    created(){
        this.getRoles();
    },
    methods:{
        getRoleInfo(roleId){
            this.$axios.get(
                '/role/getPermissionMenu',
                {
                    params:{
                        roleId:roleId
                    }
                }
            ).then(res=>{
                console.log("菜单",res)
                this.toData = res.data.toData
                this.fromData = res.data.fromData
            })
        },
        getRoles(){
            this.$axios.post(
                '/role/getAllRoles',
                {
                    pageCurr:this.page.currentPage,  
                    pageSize:this.page.pageSize,
                }
            ).then(res =>{
                this.loading = false
                this.tableData = res.data.list
                this.page.total = res.data.totalSize
            })
        },
        edit(row){
            this.nowRole = row
            this.dialogVisible = true
            this.getRoleInfo(this.nowRole.roleId)
        },
        // // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
        // changeMode() {
        //     if (this.mode == "transfer") {
        //       this.mode = "addressList";
        //     } else {
        //       this.mode = "transfer";
        //     }
        // },
        // 监听穿梭框组件添加
          add(fromData,toData,obj){
            // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
            // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
                var msg = 0;//记录一下
                for(var i = 0;i<obj.nodes.length;i++){
                    this.$axios.get(
                        "/role/addPermission",
                        {
                            params:{
                                menuId:obj.nodes[i].menuId,
                                roleId:this.nowRole.roleId
                            }
                        }
                    ).then(res=>{
                        if(res != undefined){
                            if(res.code == 0){
                                msg = 1;
                            }
                        }
                    })
                }
                if(msg == 0){
                    this.dialogVisible = false
                    this.$notify({
                        title: '成功',
                        message: '权限修改成功',
                        type: 'success'
                    });
                }else{
                    this.$notify.error({
                        title: '错误',
                        message: '权限修改失败'
                    });
                }
        },
          // 监听穿梭框组件移除
        remove(fromData,toData,obj){
            // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
            // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
            var msg = 0;//记录一下
                for(var i = 0;i<obj.nodes.length;i++){
                    this.$axios.get(
                        "/role/deletePermission",
                        {
                            params:{
                                menuId:obj.nodes[i].menuId,
                                roleId:this.nowRole.roleId
                            }
                        }
                    ).then(res=>{
                        if(res != undefined){
                            if(res.code == 0){
                                msg = 1;
                            }
                        }
                    })
                }
                if(msg == 0){
                    this.dialogVisible = false
                    this.$notify({
                        title: '成功',
                        message: '权限修改成功',
                        type: 'success'
                    });
                }else{
                    this.$notify.error({
                        title: '错误',
                        message: '权限修改失败'
                    });
                }
          },
        
        handleCurrentChange(newPage) {  
            // console.log(`当前页码变更为：${newPage}`);  
            //    在这里可以根据新的页码进行数据的加载或其他操作  
            this.page.currentPage = newPage; // 更新当前页码，如果需要进行页面数据更新的话  

            // 例如，你可能需要发送一个请求来获取新页码对应的数据 
            this.getRoles()
                
        },
    }
}

</script>